<template>
	<view>
		<view class="box">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="800"
				@change="onChange">
				<swiper-item>
					<view class="one">
						<image src="../../static/Logo.png" mode="" class="imgslogo"></image>
						<!-- <view class="one_text">影尚客</view> -->
						<view class="imgstext">
							<image src="../../static/ysk.png" mode="" class=""></image>
						</view>
						<view class="one_bottom">本App独有票价

						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="three">
						<view class="">
							<image src="../../static/w.png" class="bg"></image>
							<view class="round">
								<view class="logo">
									<view class="one">电影票比价</view>
									<view class="two">
										<view><i class="iconfont icon-dianying" />选影片<text>心花怒放</text></view>

										<hr>
										<view><i class="iconfont icon-rili" />选时间<text>5月16号</text></view>
										<hr>
										<button
											style="background-color: orange;color: white;margin-top: 20rpx;">比价购票</button>

									</view>

								</view>
							</view>
							<view class="text">
								<h1>只需选你需要</h1>
								<h2>就能给你最好</h2>
								<navigator url="/pages/Login/Login" hover-class="navigator-hover">
									<button class="btn">进入体验</button>
								</navigator>

							</view>
						</view>
					</view>
				</swiper-item>

			</swiper>

		</view>
	</view>
</template>

<script>
	import "../../static/font_3927971_ilvw1ohavh8/iconfont.css"
	export default {
		data() {
			return {

			}
		},

		methods: {
			onChange(e) {

				if (e.detail.current == 1) {

					// 当前轮播项为最后一个时，停止自动播放
					// setTimeout(()=>{
					// 	uni.navigateTo({
					// 		url:'/pages/Login/Login'
					// 	})
					// },6000)

				}
			}
		},

	}
</script>

<style>
	.box {
		width: 100vw;
		height: 100vh;
		/* background-color: rgb(68, 175, 216); */
		background-color: rgb(255, 175, 216);
	}


	.swiper {
		height: 100vh;
	}

	.one {
		background-color: white;
		height: 100vh
	}

	.bg {
		width: 100vw;
		height: 550rpx;
		margin-top: 75rpx;
		left: 20rpx;
		animation: aaa 2s infinite;
	}

	@keyframes aaa {
		0% {
			transform: scale(0.95, 0.95);
			transition: all 0.5s linear 0s;
		}

		50% {
			transform: scale(1, 1);
			transition: all 0.5s linear 0s;
		}

		100% {
			transform: scale(0.95, 0.95);
			transition: all 0.5s linear 0s;
		}
	}

	.imgslogo {
		width: 400rpx;
		height: 300rpx;
		/* margin: 230rpx 400rpx 10rpx 200rpx; */
		margin-left: 200rpx;
		margin-top: 200rpx;
		margin-bottom: 40rpx;
	}

	.imgstext {
		/* margin-left: 140rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.one_text,
	.one_bottom {
		text-align: center;
	}

	.one_bottom {
		margin-top: 300rpx;
		color: darkgray;
	}

	.round {
		width: 480rpx;
		height: 480rpx;
		border-radius: 50%;
		background-color: rgb(252, 225, 81);
		margin: 0rpx auto;
		position: absolute;
		top: 170rpx;
		left: 140rpx;
		overflow: hidden;
	}

	.logo {
		width: 355rpx;
		height: 450rpx;
		position: absolute;
		top: 100rpx;
		left: 65rpx;
		background-color: rgb(238, 238, 238);
	}

	.logo>.one {
		width: 100%;
		height: 85rpx;
		background-color: white;
		text-align: center;
		line-height: 85rpx;
	}

	.logo>.two {
		width: 90%;
		margin-left: 5%;
		background-color: white;
		margin-top: 20rpx;

	}

	.logo>.two>view {
		padding: 15rpx 10rpx;
		color: #FFA520;
		font-size: 26rpx;
	}

	.logo>.two>view>text {
		color: black;
		margin-left: 20rpx;

	}

	.text {
		color: white;
		position: relative;
		top: 230rpx;
		text-align: center;
	}

	.btn {
		margin-top: 100rpx;
		width: 350rpx;
		border-radius: 45%;
		opacity: 35%;
	}
</style>